10. Grid Layout

I. Grid Container & Items

Explanation: Grid layout ek 2-dimensional layout system hai jisme rows aur columns dono ka control hota hai. Parent ko display: grid dene par wo container ban jata hai.

<style> .grid { display: grid; grid-template-columns: auto auto auto; gap: 10px; background: lightgray; padding: 10px; } .box { background: #007bff; color: white; padding: 20px; text-align: center; border-radius: 8px; } </style> <div class="grid"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> </div> Run Code

II. Template Rows & Columns

Explanation: grid-template-columns aur grid-template-rows se hum define karte hain kitni columns ya rows honi chahiye aur unka size kya hoga.

<style> .grid { display: grid; grid-template-columns: 100px 200px 100px; grid-template-rows: 60px 60px; gap: 10px; background: #fce4ec; padding: 10px; } .box { background: #ec407a; color: white; text-align: center; padding: 10px; border-radius: 8px; } </style> <div class="grid"> <div class="box">A</div> <div class="box">B</div> <div class="box">C</div> <div class="box">D</div> <div class="box">E</div> <div class="box">F</div> </div> Run Code

III. Item Placement & Spanning

Explanation: Grid items ko specific row ya column me rakhne ke liye hum grid-column aur grid-row use karte hain.
Spanning ka matlab hai ek item multiple rows/columns tak faila ho.

<style> .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: #e0f7fa; padding: 10px; } .item { background: #00acc1; color: white; padding: 20px; border-radius: 8px; text-align: center; } .span2 { grid-column: span 2; } </style> <div class="grid"> <div class="item">1</div> <div class="item span2">2 (spans 2 columns)</div> <div class="item">3</div> <div class="item">4</div> </div> Run Code

IV. Auto-placement & Grid Areas

Explanation: CSS Grid automatically items ko place karta hai agar aap manually jagah define na karo.
Grid Areas ka use karke hum naam se jagah define karke items ko uss area me daal sakte hain (like template design).

<style> .grid { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-columns: 1fr 2fr; grid-template-rows: 60px 200px 60px; gap: 10px; background: #e8f5e9; padding: 10px; } .header { grid-area: header; background: #43a047; } .sidebar { grid-area: sidebar; background: #66bb6a; } .main { grid-area: main; background: #81c784; } .footer { grid-area: footer; background: #388e3c; } .box { color: white; padding: 15px; text-align: center; border-radius: 8px; } </style> <div class="grid"> <div class="box header">Header</div> <div class="box sidebar">Sidebar</div> <div class="box main">Main</div> <div class="box footer">Footer</div> </div> Run Code